<template>
    <div ref="chartEl" v-resize="resizeFn" class="chart-com"></div>
</template>

<script>
import * as echarts from 'echarts';
import merge from 'lodash/merge';
import debounce from 'lodash/debounce';
import uniqueId from 'lodash/uniqueId';
// import defaultOpt from './defaultOpt';
import defaultPieOpt from './defaultPieOpt';
import defaultBarOpt from './defaultBarOpt';

import defaultLineOpt from './defaultLineOpt';


// const { fs } = require('#/lessPlugin.js');

export default {
    name: 'ChartCom',
    props: {
        options: {
            type: Object,
            default: () => ({}),
        },
        type :{
            type:String,
            default:'pie'
        }
    },
    data() {
        return {
            style: '',
            styleId: 'style-dom-' + uniqueId(),
            defaultPieOpt,
            defaultLineOpt,
            defaultBarOpt,
            myChart:null,
        };
    },
    computed:{
        echartsOption(){
            const mappingTable = {
                pie:'defaultPieOpt',
                bar:'defaultBarOpt',
                line:'defaultLineOpt'
            }
            
        
            return this[mappingTable[this.type]]||{}
        }
    },
    watch: {
        options: 'init',
    },
    created() {
        this.resizeFn = debounce(() => {
            console.log('窗口变化了')
            this.init();
            this.myChart && this.myChart.resize();
        }, 500);
    },
    mounted() {
        this.styleDom = document.querySelector('#' + this.styleId);
        if (!this.styleDom) {
            this.styleDom = document.createElement('style');
            this.styleDom.setAttribute('id', this.styleId);
            document.querySelector('head').appendChild(this.styleDom);
        }
        this.init();
    },
    beforeDestroy() {
        this.myChart && this.myChart.dispose();
        document.querySelector('head').removeChild(this.styleDom);
    },
    methods: {
        async init() {
            await new Promise(res => setTimeout(res, 400));
            if (!this.myChart) {
                this.myChart = echarts.init(this.$refs.chartEl, '', { renderer: 'svg' });
                setTimeout(() => {
                    this.$emit('chart-created', this.myChart);
                });
            }
            this.style = '';
            let optTemp = merge({}, this.echartsOption, this.options)
            const opt = this.resolveOpt(optTemp);
            // this.deleteKey(opt);
            this.styleDom.innerHTML = this.style;
            this.myChart.setOption(opt);
        },
        resolveOpt(opt) {
            if (Object.prototype.toString.call(opt) === '[object Object]') {
                Object.keys(opt).forEach(k => {
                    if (k === 'fontSize') {
                        const id = 'chart-dom-' + uniqueId();
                        // font-size: ${fs(opt[k])} !important;
                        this.style += `
                            [fill="${id}"] {
                                
                                ${opt.color ? `fill: ${opt.color};` : ''}
                            }
                        `;
                        opt.color = id;
                    } else {
                        // opt[k] = this.resolveOpt(opt[k]);
                    }
                });
            }
            if (Array.isArray(opt)) {
                opt.forEach((v, i) => {
                    opt[i] = this.resolveOpt(v);
                });
            }
            return opt;
        },
        deleteKey(opt) {
            Object.keys(this.echartsOption).forEach(k => {
                if (!Object.prototype.hasOwnProperty.call(this.options, k)) {
                    delete opt[k];
                }
            });
        },
    },
};
</script>

<style>
.chart-com {
    width: 100%;
    height: 100%;
}
</style>
